<template>
  <!--
  查：
    1：定义查询 api
    2:导入
    3：进入页面调用api
    4:存储并渲染
    5：将接口与分页组件关联

 -->

  <!--
   增：
    1：创建一个dialog弹框组件
    2：在父组件使用
        ref
        .sync
        v-model
    3:使用.sync方式打开弹框组件
    4：完成表单验证
    5：定义新增api
    6:导入
    7：调用
    8：调用成功
         a:提示
         b:关闭弹框
         c:清除表单数据与验证结果
         d:刷新父级列表数据

   删
     1：点击弹出确定框
     2：定义删除api
     3:导入
     4：确定点击后调用删除api
     5:调用成功
       a:提示
       b:刷新列表数据
         如果删除的页码>1且当页只有一条数据，页码--

excel导出：
   1：需要在资源 中将文件拷贝到src下
   2：安装一个插件  file-saver
   3:导入使用 export_json_to_excel  import {export_json_to_excel} from '路径'
   4:使用
     export_json_to_excel({
       header:标题['姓名','地址'],
       data:[['张三','广州'],['李四','广州']],
       filename:'文件名'
     })

1:加入导出按钮
2：导入excel导出的方法export_json_to_excel
3：获取列表数据
4：转换数据
5：导出excel

 -->

  <div class="employees">
    <el-card>
      <div style="text-align: right">
        <!-- 导入
1：创建导入组件所对应的页面
2：配制路由（不要在菜单中显示）
3：点击跳转到导入页面
 -->
        <!-- <el-button
          type="primary"
          v-if="
            $store.state.user.userInfo.roles.points.includes(
              'employees_output_btn'
            )
          "
          @click="exportToExcel"
          >导出</el-button
        > -->
        <!-- <el-button
          type="primary"
          v-showButton="'employees_output_btn'"
          @click="exportToExcel"
          >导出</el-button
        > -->
        <el-button
          v-if="setButtonShow('employees_output_btn')"
          type="primary"
          @click="exportToExcel"
        >导出</el-button>

        <el-button type="primary" @click="$router.push('/employees/import')">
          导入</el-button>
        <!--
  .sync
  作用：用于父子间数据的双向绑定
  使用：
       子组件标签  :xxx="appXxx"  @update:xxx="appXxx=$event"
       子组件标签  :xxx.sync="appXxx"
       子组件内
          props:['xxx']
          this.$emit('update:xxx',实参值)

 -->

        <el-button type="primary" @click="addEvent"> +新增员工</el-button>
      </div>
    </el-card>
    <el-card style="margin-top: 30px">
      <!--
        el-table  :data="数据"
           el-table-column  label:标题  prop:对应字段
              自定义栏
                 el-table-column
                   template v-slot="{$index,row}"
                     $index:索引
                     row:当前行数据
       -->

      <el-table :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            {{ (page.page - 1) * page.size + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="staffPhoto" label="头像" sortable>
          <template v-slot="{ row }">
            <img
              v-showAvatar
              style="width: 30px; height: 30px"
              :src="row.staffPhoto"
              alt=""
              @click="imgClick(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" sortable />
        <el-table-column prop="mobile" label="手机号" sortable />
        <el-table-column prop="workNumber" label="工号" sortable />
        <!--
          1:过滤器
          用什么方式转换
           字符转换：过滤器 ,特点：不能使用this,它只能用于v-bind  {{}}
           注册：
              filters:{
                过滤器名字(形参){
                  return
                }
              }
          使用 {{  实参 |  过滤器名字 }}

          2:使用el-table组件内的自带方法进行转换
            el-table-column  :formatter:字符转换

          3:自定义指令
              定义:
                局部：
                  directives:{
                   指令名:{
                     生命周期
                     bind:绑定时类似beforeMount
                     inserted:渲染时类似mounted
                     update:更新时，不保证更新完成
                     componentUpdated:更新完成时，指令所在组件包括子组件都更新完成时执行 类似updated
                     unbind:解绑 类似beforeDestroy
                      bind(dom,obj,vnode){
                        dom:指令所在dom
                        obj:{
                          属性
                          修饰符
                          名字
                          值（value）
                        }
                        vnode:{context:指令所在组件的this}
                      }

                   }

                  }

         -->
        <!-- <el-table-column prop="formOfEmployment" label="聘用形势" sortable>
          <template v-slot="{ row }">
            {{ row.formOfEmployment | formatStr }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          :formatter="formatterTable"
          prop="formOfEmployment"
          label="聘用形势"
          sortable
        /> -->
        <!-- <el-table-column prop="formOfEmployment" label="聘用形势" sortable>
          <template v-slot="{ row }">
            <div v-dStr="row.formOfEmployment" />
          </template>
        </el-table-column> -->
        <el-table-column prop="formOfEmployment2" label="聘用形势" sortable />
        <el-table-column prop="departmentName" label="部门" sortable />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable />
        <el-table-column prop="enableState" label="状态" sortable />
        <el-table-column label="操作" width="350px">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="lookClick(row)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <!--
   分配角色：
           1：创建角色弹框组件
           2：点击分配角色打开弹框
                ref   v-model   .sync
                .sync
                    子组件标签  :isShow="show"  @update:isShow="show=$event"
                    子组件标签  :isShow.sync="show"
                    子组件内
                        props:['isShow']
                        this.$emit('update:isShow',true)

           3：角色弹框组件
              a:显示角色列表
              b:显示当前用户已有角色的勾选(数据回显)
                 b1:当前点击项数据包括回显数据，直接赋值显示
                 b2:当前点击项数据不包括回显数据，调用接口获取详情数据并回显
                   定义api
                   导入api
                   调用获取并回显
           4:修改角色
               a:实现多选框勾选拿到选择后的值
               b:定义修改的api
               c:导入修改api
          5：调用修改api(成功)
              a:提示
              b:关闭弹框
              c:清空已勾选数据
 -->

              <el-button type="text" @click="roleClick(row)">角色</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; padding-top: 30px">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 2, 5, 10, 100, 200, 300, 400]"
          :page-size.sync="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增员工弹框组件 -->
    <!-- <EmployeesAdd :is-show="show" @update:isShow="show = $event" /> -->
    <EmployeesAdd :is-show.sync="show" @getData="getData" />
    <!-- 二维码弹框 -->
    <el-dialog title="二维码" :visible.sync="showQrcode">
      <div style="text-align: center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <!-- 角色分配组件 -->
    <!-- <RoleSet :is-show="RoleShow" @update:isShow="RoleShow = $event" /> -->
    <RoleSet ref="role" :is-show.sync="RoleShow" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import jsCookie from 'js-cookie'
import employeesData from '@/api/constant/employees'
import EmployeesAdd from './components/EmployeesAdd.vue'
import moment from 'moment'
// import { export_json_to_excel } from '@/vendor/Export2Excel'
import Qrcode from 'qrcode'
import RoleSet from './components/RoleSet.vue'
// import { setButtonShow } from '@/utils/index'
export default {
  components: {
    EmployeesAdd,
    RoleSet
  },
  filters: {
    formatStr(id) {
      // id   employeesData.hireType
      // 1:找出数组中对应的id项  2：返回该项的value
      // 返回值=数组.find(item=>return boolean true:返回值就是当前项的item)   找不到返回值是undefined
      const temp = employeesData.hireType.find((item) => item.id === id)
      return temp ? temp.value : '-'
    }
  },
  directives: {
    dStr: {
      inserted(dom, obj) {
        //  id===  obj.value
        const temp = employeesData.hireType.find(
          (item) => item.id === obj.value
        )
        dom.innerText = temp ? '自定义指令转换:' + temp.value : '-'
      },
      componentUpdated(dom, obj) {
        const temp = employeesData.hireType.find(
          (item) => item.id === obj.value
        )
        dom.innerText = temp ? '自定义指令转换:' + temp.value : '-'
      }
    }
  },
  data() {
    return {
      // setButtonShow,
      RoleShow: false,
      showQrcode: false,
      show: false, // 控制add组件是否显示
      list: [],
      page: {
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees-size') || 10, //	是	10	每页条数
        total: 100
      }
    }
  },
  created() {
    this.getData()
  },

  methods: {
    // 页容量改变
    handleSizeChange(size) {
      jsCookie.set('employees-size', size)
      this.getData()
    },
    // 页码改变
    handleCurrentChange(page) {
      this.getData()
    },
    async getData() {
      const res = await sysUser(this.page)
      console.log('员工列表', res)
      // 提前就转换好了
      res.data.rows.forEach((item) => {
        item.formOfEmployment2 = this.formatterTable(
          null,
          null,
          item.formOfEmployment
        )
        // moment
        // 1：安装  2：导入  3:使用  moment(传入时间值).format('YYYY-MM-DD HH(hh):mm:ss')
        item.timeOfEntry = moment(item.timeOfEntry).format('YYYY-MM-DD')
      })
      this.list = res.data.rows
      this.page.total = res.data.total
    },
    // 聘用形势数据转换
    formatterTable(row, column, cellValue, index) {
      // row:当前行
      // column:当前列
      // cellValue:当前项
      // index:索引

      const temp = employeesData.hireType.find((item) => item.id === +cellValue)
      return temp ? '存储前转换-' + temp.value : '-'
    },
    // 新增按钮点击事件
    addEvent() {
      this.show = true
    },
    // 删除点击
    del(id) {
      this.$confirm('您确定删除该项吗')
        .then(async() => {
          await sysUserDelete(id)
          this.$message.success('删除成功')
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {})
    },
    // 导出方法点击
    async exportToExcel() {
      //  获取数据
      const res = await sysUser({
        page: 1,
        size: 99999
      })
      console.log(res.data.rows)
      //  1:列出转换规则
      const rules = {
        姓名: 'username',
        手机号: 'mobile',
        工号: 'workNumber',
        聘用形式: 'formOfEmployment',
        部门: 'departmentName',
        入职时间: 'timeOfEntry'
      }
      // 2：生成新的数组
      // header:['姓名','手机号'....]
      // data:[[..]]
      const newArr = res.data.rows.map((item) => {
        const temp = []
        Object.values(rules).forEach((key) => {
          if (key === 'formOfEmployment') {
            // 聘用形式转换
            temp.push(this.formatterTable('', '', item[key]))
          } else if (key === 'timeOfEntry') {
            // 时间转换
            temp.push(moment(item[key]).format('YYYY-MM-DD'))
          } else {
            temp.push(item[key])
          }
        })
        return temp
      })
      // 生成excel
      import('@/vendor/Export2Excel').then((res) => {
        console.log(res)
        res.export_json_to_excel({
          header: Object.keys(rules),
          data: newArr,
          filename: '员工列表'
        })
      })
    },
    // 查看点击
    lookClick(row) {
      this.$router.push('/employees/details/' + row.id)
      console.log(row)
    },
    // 头像是点击生成二维码
    imgClick(imgsrc) {
      this.showQrcode = true
      this.$nextTick(() => {
        console.log(this.$refs.canvas)
        Qrcode.toCanvas(this.$refs.canvas, imgsrc, {
          width: 400,
          height: 400
        })
      })
    },
    // 角色点击
    roleClick(row) {
      this.RoleShow = true
      // 调用获取角色列表方法
      this.$refs.role.getData()

      // 调用获取用户详情包括角色方法
      this.$refs.role.getUserRoleIds(row.id)
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
}
</style>
